<script setup lang="ts" name="ViewPrivateOrder">
import dayjs from "dayjs";
import { numberDigits, typeDigits } from "@/const/color";
const route = useRoute();
const { t } = useI18n();
let data: any = route.query;
let detail = { ...data, contentList: JSON.parse(data.content) };
console.log(detail, "detail");

const renderRegGreen = (strContent: string) => {
  if (typeof strContent === "string") {
    const str = strContent?.split("_");
    let fristNum = str[0];
    let thirdNum = str[2];
    let bg;
    if (+fristNum == 1) {
      bg = typeDigits.find((it: any) => {
        return it.id == +thirdNum;
      })?.bg;
    } else {
      bg = numberDigits.find((it: any) => {
        return it.id == +thirdNum;
      })?.bg;
    }
    return {
      bg,
      number: +fristNum == 1 ? "" : thirdNum,
    };
  }
  return {};
};
</script>

<template>
  <div class="viewPrivateOrderPage">
    <DetailHeader :title="detail.lotteryClassName" :isNeedBackIcon="true" />
    <div class="lotteryList">
      <div
        class="listItem"
        v-for="(it, index) in detail.contentList"
        :key="index"
      >
        <div class="titleTop">
          {{ detail.lotteryClassName }} <span>{{ detail.period }}</span>
        </div>
        <div class="tikets">
          {{ t("mybet.text4") }}
          <div v-if="detail.bigCode == 4" class="detailRedGreen">
            <span
              class="radius"
              :style="{
                background: renderRegGreen(it.content)?.bg,
              }"
            >
              {{ renderRegGreen(it.content)?.number }}
            </span>
            &nbsp;
          </div>
          <div v-else class="detailRow">
            {{ it.name }}
          </div>
        </div>
        <div class="Drawdate">
          {{ t("mybet.text5") }}
          <p class="detailRow">
            {{ dayjs(+detail.createTime).format("DD-MM-YYYY hh:mm A") }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.viewPrivateOrderPage {
  .lotteryList {
    background: #f1f5f9;
    padding: 4rem 16rem 16rem 16rem;
    box-sizing: border-box;
    .listItem {
      background: url("@/assets/images/Me/lotteryBg.png") no-repeat;
      background-size: cover;
      width: 100%;
      height: 96rem;
      padding: 16rem;
      box-sizing: border-box;
      margin-top: 12rem;
      position: relative;
      :not(:first-child) {
        margin-top: 8rem;
      }
      .titleTop {
        color: #343c4b;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 600;
        line-height: 16px;
        display: flex;
        align-items: center;
        & > span {
          color: #ff2d55;
          margin-left: 16rem;
        }
      }
      .tikets {
        display: flex;
        align-items: center;
        color: #343c4b;
        font-family: Inter;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        .detailRow {
          color: #343c4b;
        }
        .detailRedGreen {
          display: flex;
          align-items: center;
          .radius {
            margin-top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            width: 20rem;
            height: 20rem;
            border-radius: 50%;
            font-size: 14rem;

            & + .radius {
              margin-left: 4rem;
            }
          }
        }
      }
      .Drawdate {
        color: #89899a;
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
